<template>
  <a-modal
    width="600px"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden' }"
  >
    <template #title>
      <modalTitle @close="close" title="下发任务"></modalTitle>
    </template>
    <div style="padding: 0 10px 10px 10px">
      <div class="infobox myform">
        <a-row>
          <a-col :span="24">
            <div style="display: flex; margin-top: 10px">
              <div class="label">url</div>
              <div style="flex: 1">
                <a-textarea style="width: 100%" v-model:value="spUrl" placeholder="输入任务内容" size="small" />
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div style="display: flex; align-items: center; justify-content: center">
        <div class="btn" @click="close">确认</div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { reactive, ref } from "vue"
import modalTitle from "../modalTitle.vue"
// import { UserOutlined } from '@ant-design/icons-vue'

const spUrl = ref("")

const modalShow = ref(false)

const close = () => {
  localStorage.setItem("spUrl", spUrl.value)
  modalShow.value = false
}
const show = (e) => {
  spUrl.value = localStorage.getItem("spUrl")
  modalShow.value = true
}
defineExpose({ show, close })
</script>
<style>
.myform .ant-select:not(.ant-select-customize-input) .ant-select-selector {
  background: #00000066;
  border: 1px solid #57ffff80;
}
.myform .ant-select .ant-select-arrow {
  color: #57ffff;
}
.myform .ant-select-single.ant-select-sm .ant-select-selector {
  color: #fff;
  font-size: 12px;
}
.myform .ant-select .ant-select-selection-placeholder {
  color: #fff;
  font-size: 12px;
}
.myform .ant-select .ant-select-selection-search {
  color: #fff;
  font-size: 12px;
}
.ant-select-dropdown {
  background: #000000 !important;
  color: #fff;
}
.ant-select-dropdown .ant-select-item {
  color: #fff;
  font-size: 12px;
}
</style>
<style>
.myform .ant-input-sm {
  /* border-radius:20px; */
  padding: 2px 10px;
}
.myform .ant-input {
  background-color: #00000066;
  border: 1px solid #57ffff80;
  color: #ffffff;
  font-size: 12px;
}
.myform .ant-input::placeholder {
  color: #ffffff;
  font-size: 12px;
}
</style>
<style scoped>
.item {
  display: flex;
  align-items: center;
  width: 120px;
  margin-right: 20px;
  margin-bottom: 10px;
  background-color: #00000066;
  padding: 5px 10px 5px 5px;
  border-radius: 99px;
}
.infobox {
  background: #4ddecf1a;
  padding: 10px 16px;
  border: 1px solid #4ddecf33;
  border-radius: 10px;
  color: #ffffff;

  .label {
    font-size: 12px;
    width: 80px;
  }
}
.btn {
  background: linear-gradient(180deg, rgba(0, 36, 42, 0.5) 0%, rgba(0, 67, 78, 0.5) 100%);
  border: 1px solid #57ffff;
  color: #ffffff;
  font-size: 10px;
  padding: 5px 20px;
  border-radius: 99px;
  cursor: pointer;
  margin-bottom: 10px;
}
</style>
